<extend name="Common@Layout:hui" />
<block name="style">
<link href="/Public/Assets/Hui/lib/validator/jquery.validator.css" rel="stylesheet" type="text/css" />
<style>
body{font-family:'微软雅黑';}
.playlink{position:absolute;z-index:2;display:block;width:100%;height:120px;text-align:center;line-height:120px;width:214px;
filter:alpha(opacity=40); 
-moz-opacity:0.4; 
opacity:0.4;}
.playlink .icon{font-size:60px;color:#000;}
.playlink:hover{text-decoration: none;filter:alpha(opacity=100); 
-moz-opacity:1; 
opacity:1;}
.playlink:hover .icon{display:inline-block;}	
</style>
</block>

<block name="main">
	<form action="{:u('upload_post')}" method="post" class="form form-horizontal validator_form close-dialog callback" id="form-article-add">
    <div class="container" style="margin:20px;">
		<table cellpadding="2"  class="mini-table" cellspacing="2" width="100%">
			<tbody>
				<tr>
					<th width="100">标题：</th>
					<td>
						<input type="text" class="input-text" value="{$info.title}" style="width:400px;" placeholder="请输入文章标题" id="" name="title" data-rule="文章标题:required;">
					</td>
				</tr>
				<tr>
					<th width="100">视频摘要：</th>
					<td>
						<textarea name="desc" cols="" rows="" class="textarea" style="width:400px;"  placeholder="说点什么...最少输入10个字符" datatype="*10-100" dragonfly="true" nullmsg="备注不能为空！" onKeyUp="textarealength(this,200)">{$info.desc}</textarea>
						<p class="textarea-numberbar"><em class="textarea-length">0</em>/200</p>
					</td>
				</tr>

				<!-- 
				<tr>
					<th width="100">导入视频：</th>
					<td>
						<input type="text" class="input-text" style="width:250px;" id="daoru">
						<a href="javascript:;" id="daoruBtn" class="btn btn-primary size-S radius">导入</a>
						<span class="must_red">根据视频Hash导入</span>
					</td>
				</tr>
				 -->
				<tr>
					<th width="100">上传视频：</th>
					<td>
						<div id="container" style="display:inline-block">
		                    <a class="btn btn-primary size-S radius" id="pickfiles" href="javascript:;" ><span>上传视频文件</span></a>
		                </div>
						<span class="must_red">为了兼容移动端，请上传视频格式：'mp4'</span>
					</td>
				</tr>
				<tr>
					<th width="100"></th>
					<td>
						<table class="table table-striped table-hover text-center" id="fstable" <if condition="!$info['id']">style="display:none"</if>>
		                    <thead>
		                      <tr>
		                        <th>文件名称</th>
		                        <th>视频大小</th>
		                        <th>详细信息</th>
		                      </tr>
		                    </thead>
		                    <tbody id="fsUploadProgress">
		                    	<if condition="$info">
		                    	<tr class="progressContainer" style="opacity: 1;">
		                    		<td class="progressName">{$info.filename}</td>
		                    		<td class="progressFileSize"><php>$size = sprintf("%.2f", $info['size']/1024/1024);echo $size.'M';</php></td>
		                    		<td>
		                    			<div class="info">
		                    				<div class="">
			                    				<strong>地址:</strong>
			                    				<a href="{$info.url}" target="_blank"> 
			                    					{$info.url}
			                    				</a>
			                    				<div class="hash">
			                    					<strong>Hash:</strong>{$info.key}
			                    				</div>
		                    				</div>
		                    				<a href="javascript:;" class="progressCancel" style="display: none;">×</a>
										</div>
									</td>
								</tr>
								</if>
		                    </tbody>
		                </table>
		            </td>
		        </tr>

		        <tr <if condition="$_SESSION['loginUser']['role'] neq 'ROLE_SUPER_ADMIN'">style="display:none;"</if>>
					<th width="100">视频封面帧：</th>
					<td>
						<input type="text" class="input-text" style="width:200px;" id="vframe" name="vframe" value="{$info.vframe|default=5}">
						<a href="javascript:;" id="setVframe" class="btn btn-primary size-S radius">设定</a>
						<span class="must_red">只能是正整数（第x帧）</span>
					</td>
				</tr>

				<tr>
					<th width="100">视频封面预览：</th>
					<td>
						
						<div style="height:120px;">
							<a href="{$info['url']|default='javascript:;'}" target="_blank" id="showVideoLink" class="playlink">
								<i class="icon Hui-iconfont"></i>
							</a>
							<if condition="$info['id']">
							<img src="{$info['url']}?vframe/jpg/offset/{$info['vframe']}" width="214px" height="100%" id="videoImg">
							<else/>
							<img src="/Public/Static/Img/default.png" height="100%" width="214px" id="videoImg">
							</if>
						</div>
						
						<input type="hidden" name="id" id="videoId" value="{$info.id}">
				  		<input type="hidden" id="videoUrl" value="{$info.url}">
					</td>
				</tr>
			</tbody>
		</table>
        <div class="row cl">
			<div class="col-10 col-offset-2">
				<input type="hidden" name="other" value="{$_GET['other']}">
				<button class="btn btn-primary size-S radius" type="submit"><i class="Hui-iconfont">&#xe632;</i> 保存</button>
				<button onClick="parent.close_iframe_dialog();" class="btn btn-default radius" type="button">&nbsp;&nbsp;关闭&nbsp;&nbsp;</button>
			</div>
		</div>
	</div>
	</form>
</block>

<block name="script">
<css href="/Public/Sea/modules/kindeditor/css/upload.css" />
<js href="/Public/Assets/plupload/moxie.js"/>
<js href="/Public/Assets/plupload/plupload.dev.js"/>
<js href="/Public/Assets/plupload/i18n/zh_CN.js" />
<js href="/Public/Assets/Qiniu/ui.js" />
<js href="/Public/Assets/Qiniu/qiniu.js" />
<js href="/Public/Assets/Qiniu/main.js" />
<script>
$('#setVframe').click(function(){
	var url = $('#videoUrl').val();
	var vframe = $('#vframe').val();
	if(url){
		if(isInteger(parseInt(vframe))&&parseInt(vframe)>=0){
			$('#videoImg').attr('src',$('#videoUrl').val()+"?vframe/jpg/offset/"+vframe);	
		}else{
			alert('请输入大于等于0的整数');
			$('#vframe').focus();
		}
	}
});
$('#delvideo').click(function(){
	var $this = $(this);
	var asker = layer.confirm('确定删除视频吗？', function(){
		var ii = layer.msg('数据处理中...', {icon: 16,time: 10000}, function(){
    	    layer.alert('服务器响应超时', {icon: 7});
    	});
		$('#fstable').hide();
		$('#fsUploadProgress').html('');
		$('#showVideo').attr('src','/material/media/play');
		$('#videoId').val('');
		$('#videoUrl').val('');
		$('#videoImg').attr('src','/Public/Static/Img/default.png');
		layer.close(ii);
		layer.alert('删除成功，不过需要保存后生效！');
	});
});
$('#daoruBtn').click(function(){
	if($('#daoru').val()){
		var ii = layer.msg('数据处理中...', {icon: 16,time: 10000});
		$.post('/material/media/findvideo',{"key":$('#daoru').val()},function(data){
			layer.close(ii);
			if(data.status){
				var video = data.data;
				$('#fstable').show();
				var html = '<tr class="progressContainer" style="opacity: 1;">'+
            		'<td class="progressName">'+video.filename+'</td>'+
            		'<td class="progressFileSize">'+Math.floor(parseInt(video.size)/1024/1024*100)/100+'M</td>'+
            		'<td>'+
            			'<div class="info">'+
            				'<div class="">'+
                				'<strong>地址:</strong>'+
                				'<a href="'+video.url+'" target="_blank">'+video.url+'</a>'+
                				'<div class="hash">'+
                					'<strong>Hash:</strong>'+video.key+
                				'</div>'+
            				'</div>'+
            				'<a href="javascript:;" class="progressCancel" style="display: none;">×</a>'+
						'</div>'+
					'</td>'+
				'</tr>';
				$('#fsUploadProgress').html(html);
				$('#showVideo').attr('src','/material/media/play/id/'+video.id);
				$('#videoId').val(video.id);
				$('#videoUrl').val(video.url);
				$('#vframe').val(video.vframe)
				var vframe = $('#vframe').val();
				$('#videoImg').attr('src',$('#videoUrl').val()+"?vframe/jpg/offset/"+vframe);
			}else{
				layer.alert(data.info);
			}
		});
	}else{
		$('#daoru').focus();
	}
});
function isInteger(obj) {
    return obj%1 === 0
}

</script>
</block>